<template>
	<view class="comment-container">
		<!-- 评论头部 -->
		<view class="comment-header">
			<text class="title">商品评价</text>
			<view class="rate-info">
				<u-rate :count="5" v-model="avgRating" active-color="#ff9900" readonly size="28"></u-rate>

				<text class="rating-text">{{ avgRating.toFixed(1) }}分</text>
				<text class="comment-count">({{ comments.length }}条评价)</text>
			</view>
		</view>

		<!-- 评论标签筛选 -->
		<scroll-view scroll-x class="tag-scroll">
			<view v-for="(tag, index) in tags" :key="index" class="tag-item"
				:class="{ 'active': activeTag === tag.type }" @click="changeTag(tag.type)">
				{{ tag.name }}({{ tag.count }})
			</view>
		</scroll-view>

		<!-- 评论列表 -->
		<view class="comment-list">
			<view v-for="(item, index) in filteredComments" :key="index" class="comment-item">
				<view class="user-info">
					<u-avatar :src="item.avatar" size="40"></u-avatar>
					<view class="user-detail">
						<text class="username">{{ item.username }}</text>
						<u-rate :count="5" v-model="item.rating" readonly active-color="#ff9900" size="16"></u-rate>
					</view>
					<text class="time">{{ item.time }}</text>
				</view>

				<view class="comment-content">
					{{ item.content }}
				</view>

				<view v-if="item.images.length" class="comment-images">
					<u-image v-for="(img, imgIndex) in item.images" :key="imgIndex" :src="img" width="150" height="150"
						mode="aspectFill" @click="previewImage(item.images, imgIndex)"></u-image>
				</view>

				<view class="comment-sku">
					购买规格：{{ item.sku }}
				</view>
			</view>

			<u-loadmore :status="loadStatus" :load-text="loadText" @loadmore="loadMore" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 评论数据
				comments: [{
						id: 1,
						username: '用户1',
						avatar: 'https://cdn.uviewui.com/uview/template/SmilingDog.jpg',
						rating: 5,
						content: '衣服质量很好，穿着很舒服，下次还会购买',
						images: [
							'https://pic1.imgdb.cn/item/685a946958cb8da5c86c1c95.png',
							'https://pic1.imgdb.cn/item/685a946958cb8da5c86c1c96.png'
						],
						sku: '黑色 XL',
						time: '2023-05-10',
						type: 'all' // all, good, middle, bad, image
					},
					{
						id: 2,
						username: '用户2',
						avatar: 'https://cdn.uviewui.com/uview/template/SmilingDog.jpg',
						rating: 4,
						content: '衣服质量很好，穿着很舒服，下次还会购买',
						images: [
							'https://pic1.imgdb.cn/item/685a946958cb8da5c86c1c95.png',
							'https://pic1.imgdb.cn/item/685a946958cb8da5c86c1c96.png'
						],
						sku: '黑色 XL',
						time: '2023-05-10',
						type: 'all' // all, good, middle, bad, image
					},
					{
						id: 3,
						username: '用户2',
						avatar: 'https://cdn.uviewui.com/uview/template/SmilingDog.jpg',
						rating: 3,
						content: '衣服质量很好，穿着很舒服，下次还会购买',
						images: [
							'https://pic1.imgdb.cn/item/685a946958cb8da5c86c1c95.png',
							'https://pic1.imgdb.cn/item/685a946958cb8da5c86c1c96.png'
						],
						sku: '黑色 XL',
						time: '2023-05-10',
						type: 'all' // all, good, middle, bad, image
					}
					// 更多评论数据...
				],

				// 标签数据
				tags: [{
						name: '全部',
						type: 'all',
						count: 0
					},
					{
						name: '好评',
						type: 'good',
						count: 0
					},
					{
						name: '中评',
						type: 'middle',
						count: 0
					},
					{
						name: '差评',
						type: 'bad',
						count: 0
					},
					{
						name: '有图',
						type: 'image',
						count: 0
					}
				],

				// 当前选中的标签
				activeTag: 'all',

				// 分页相关
				page: 1,
				pageSize: 5,
				loadStatus: 'loadmore',
				loadText: {
					loadmore: '上拉加载更多',
					loading: '正在加载...',
					nomore: '没有更多了'
				},
			}
		},

		computed: {
			// 计算平均评分
			avgRating() {
				if (this.comments.length === 0) return 5
				const total = this.comments.reduce((sum, item) => sum + item.rating, 0)
				console.log('rate', total / this.comments.length);
				return total / this.comments.length
			},
			// 筛选后的评论
			filteredComments() {
				return this.comments.slice(0, this.page * this.pageSize)
					.filter(item => {
						if (this.activeTag === 'all') return true
						if (this.activeTag === 'good') return item.rating >= 4
						if (this.activeTag === 'middle') return item.rating === 3
						if (this.activeTag === 'bad') return item.rating <= 2
						if (this.activeTag === 'image') return item.images.length > 0
						return true
					})
			}
		},

		created() {
			this.countTags()
		},

		methods: {
			// 切换标签
			changeTag(type) {
				this.activeTag = type
				this.page = 1
			},

			// 加载更多
			loadMore() {
				if (this.loadStatus !== 'loadmore') return

				this.loadStatus = 'loading'
				setTimeout(() => {
					this.page++
					if (this.page * this.pageSize >= this.comments.length) {
						this.loadStatus = 'nomore'
					} else {
						this.loadStatus = 'loadmore'
					}
				}, 1000)
			},

			// 统计各标签数量
			countTags() {
				this.tags.forEach(tag => {
					if (tag.type === 'all') {
						tag.count = this.comments.length
					} else if (tag.type === 'good') {
						tag.count = this.comments.filter(item => item.rating >= 4).length
					} else if (tag.type === 'middle') {
						tag.count = this.comments.filter(item => item.rating === 3).length
					} else if (tag.type === 'bad') {
						tag.count = this.comments.filter(item => item.rating <= 2).length
					} else if (tag.type === 'image') {
						tag.count = this.comments.filter(item => item.images.length > 0).length
					}
				})
			},

			// 预览图片
			previewImage(images, index) {
				uni.previewImage({
					current: index,
					urls: images
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.comment-container {
		padding: 20rpx;
		padding-bottom: 120rpx;
	}

	.comment-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;

		.title {
			font-size: 32rpx;
			font-weight: bold;
		}

		.rate-info {
			display: flex;
			align-items: center;

			.rating-text {
				margin: 0 10rpx;
				color: #ff9900;
				font-weight: bold;
			}

			.comment-count {
				color: #999;
				font-size: 24rpx;
			}
		}
	}

	.tag-scroll {
		white-space: nowrap;
		margin-bottom: 20rpx;

		.tag-item {
			display: inline-block;
			padding: 10rpx 20rpx;
			margin-right: 20rpx;
			background-color: #f5f5f5;
			border-radius: 30rpx;
			font-size: 24rpx;
			color: #666;

			&.active {
				background-color: #ff9900;
				color: #fff;
			}
		}
	}

	.comment-item {
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f5f5f5;

		.user-info {
			display: flex;
			align-items: center;
			margin-bottom: 15rpx;

			.user-detail {
				flex: 1;
				margin-left: 15rpx;

				.username {
					display: block;
					font-size: 26rpx;
					margin-bottom: 5rpx;
				}
			}

			.time {
				color: #999;
				font-size: 24rpx;
			}
		}

		.comment-content {
			margin: 15rpx 0;
			font-size: 28rpx;
			line-height: 1.5;
		}

		.comment-images {
			display: flex;
			flex-wrap: wrap;
			margin: 15rpx 0;

			::v-deep .u-image {
				margin-right: 15rpx;
				margin-bottom: 15rpx;
				border-radius: 8rpx;
				overflow: hidden;
			}
		}

		.comment-sku {
			color: #999;
			font-size: 24rpx;
		}
	}
</style>